<template>
    <div class="top">
        <el-card>
            <div class="card">
                <el-form :inline="true">
                    <el-form-item>
                        <el-input placeholder="请输入教师名称" v-model="keyword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="add">
                <el-button type="success" @click="handleAdd" icon="el-icon-plus">添加</el-button>
            </div>
        </el-card>
        <el-card>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="学号" align="center" property="core"></el-table-column>
                <el-table-column label="姓名" align="center" property="name"></el-table-column>
                <el-table-column label="课程" align="center" property="subjects"></el-table-column>
                <el-table-column label="年级" align="center" property="grade"></el-table-column>
                <el-table-column label="班级" align="center" property="class"></el-table-column>
                <el-table-column label="学期" align="center" property="semester"></el-table-column>
                <el-table-column label="成绩" align="center" property="grades"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-dialog title="新增" :visible.sync="dialogFormVisible">
                    <el-form :model="form" :rules="rules" ref="formDemo">
                        <el-form-item label="学号:" :label-width="formLabelWidth" prop="core">
                            <el-input v-model="form.teacher" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名:" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="form.teacher" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="课程:" :label-width="formLabelWidth" prop="subjects">
                            <el-input v-model="form.cardid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="年级:" :label-width="formLabelWidth" prop="grade">
                            <el-input v-model="form.college" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="班级:" :label-width="formLabelWidth" prop="class">
                            <el-input v-model="form.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学期:" :label-width="formLabelWidth" prop="semester">
                            <el-input v-model="form.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="成绩:" :label-width="formLabelWidth" prop="grades">
                            <el-input v-model="form.phone" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="handleCancel">取 消</el-button>
                        <el-button type="primary" @click="handleSave">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </el-card>
        <div>
            <el-pagination :current-page="pager.pageIndex" :page-size="pager.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pager.rowsTotal" background>
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            tableData: [],
            dialogFormVisible: false,
            formLabelWidth: "120px",
            form: {
                core: '',
                name: '',
                subjects: '',
                grade: '',
                class: '',
                semester: '',
                grades: ''
            },
            rules: {
                core: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入学号",
                    },
                ],
                name: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入姓名",
                    },
                ],
                subjects: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入课程",
                    },
                ],
                grade: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入年级",
                    },
                ],
                class: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入班级",
                    },
                ],
                semester: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入学期",
                    },
                ],
                grades: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入成绩",
                    },
                ]
            },
            pager: {
                pageIndex: 1,
                rowsTotal: 100,
            },
        }
    },
    methods: {
        handleQuery() {
            if (this.keyword == "") {
                this.$message.warning("查询条件不能为空");
                this.keyword = "";
                return
            }
            console.log("你输入的查询条件:" + this.keyword);
        },
        handleAdd() {
            this.dialogFormVisible = true;
        },
        handleEdit() {
            this.dialogFormVisible = true;
        },
        handleCancel() {
            this.dialogFormVisible = false;
        },
        handleSave() {
            this.dialogFormVisible = false;
        },
    }
}

</script>
<style scoped>
.top {
    width: 100%;
    height: 100%;
}

.card {
    width: 100%;
    height: 100%;
}
</style>
<style>
.el-card__body {
    display: flex;
    justify-content: space-between;
}

.el-form-item__label {
    font-size: 18px;
    font-weight: bolder;
}

.el-table-column {
    width: auto;
}
</style>
